import React, { useState, useEffect } from 'react';
import style from "./Textcarousel.module.css";
import { Carousel } from 'antd';
import "./index.css";
// 文字轮播
function Textcarousel() {
    const text = ['品牌IP', '营销设计', '包装设计', '设计赛事'];

    const [currentIndex, setCurrentIndex] = useState(0); // 当前索引 
    //动画效果
    const [isAnimating, setIsAnimating] = useState(false);


    // 更新当前索引
    const onChange = (current: number) => {
        setCurrentIndex(current);
        setIsAnimating(true);
    };

    useEffect(() => {
        if (isAnimating) {
            const timer = setTimeout(() => {
                setIsAnimating(false);
            }, 200); // 与 CSS 动画时间一致

            return () => clearTimeout(timer);
            // 这个返回的函数是一个清理函数，用于在组件卸载或在依赖项变化时清除定时器，防止内存泄漏
        }
    }, [isAnimating]);

    return (
        <div>
            <div className={style.bigtitle}>
                <p className={style.title}>
                    融合优势资源
                </p>
                <div className={style.title1}>
                    为企业定制独一无二的
                    {/* <span style={{ width: '130px', height: '40px', display: 'inline-block' }}>
                        <Carousel
                            pauseOnHover={false}
                            dots={false}
                            autoplay
                            autoplaySpeed={2000}
                            vertical
                            initialSlide={currentIndex} // 设置初始显示项
                            key={currentIndex} // 确保当 currentIndex 改变时强制重渲染
                        >
                            {text.map((item, index) => (
                                <div key={index} className={style[`color${index + 1}`]}>
                                    {item}
                                </div>
                            ))}
                        </Carousel>
                    </span> */}
                    <span
                        className={`${style[`color${currentIndex + 1}`]} ${isAnimating ? style.animate : ''}`}
                        style={{ width: '150px', height: '40px', display: 'inline-block' }}
                    >
                        {text[currentIndex]}
                    </span>
                </div>
            </div>
            <div className={style.easing}>
                <Carousel
                    pauseOnHover={false}
                    dots={true}
                    autoplay
                    autoplaySpeed={2000}
                    vertical
                    afterChange={onChange} // 点击 dots 切换时更新上方文本
                >
                    {/* 示例内容 */}
                    <div className={style.easemain1}></div>
                    <div className={style.easemain2}></div>
                    <div className={style.easemain3}></div>
                    <div className={style.easemain4}></div>
                </Carousel>
                <button className={style.Enquirenow}>立即咨询</button>
            </div>
        </div>
    );
}

export default Textcarousel;
